<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
    <composite:attribute name="type" required="true" default="unknown"/>
</composite:interface>
<composite:implementation>
    <h:outputScript library="js" name="colorpicker.js" target="head"/>
    <h:outputStylesheet library="css" name="colorpicker.css"/>

    <div id="#{cc.clientId}" class="colorSelector">
        <div style="background-color: #0000FF;"></div>
    </div>
    <script type="text/javascript">
        /* <![CDATA[ */
        jQuery("##{cc.clientId}").ColorPicker({
            onBeforeShow: function () {
                var divEl = jQuery('##{cc.clientId} div');
                var originalColor = colorToHex(divEl.css('backgroundColor'));
                jQuery(this).ColorPickerSetColor(originalColor);
                
                // buffer original color
                divEl.data("colorpicker.originalColor", originalColor);
            },
            onShow: function (colpkr) {
                jQuery(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                jQuery(colpkr).fadeOut(500);
                var divEl = jQuery('##{cc.clientId} div');
                if (divEl.data("colorpicker.originalColor") != colorToHex(divEl.css('backgroundColor'))) {
                    sendPropertiesChanges('#{cc.attrs.type}');
                }
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                jQuery('##{cc.clientId} div').css('backgroundColor', '#' + hex);
            },
            onSubmit: function(hsb, hex, rgb, el) {
                jQuery(el).ColorPickerHide();
                var divEl = jQuery('##{cc.clientId} div');
                if (divEl.data("colorpicker.originalColor") != colorToHex(divEl.css('backgroundColor'))) {
                    sendPropertiesChanges('#{cc.attrs.type}');
                }
            }
        });
        /* ]]> */
    </script>
</composite:implementation>
</html>